<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <van-list
        offset="200"
        :loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
      >
        <van-card
          v-for="item in goodsList"
          :key="item.goods_id"
          :num="item.goods_number"
          :thumb="item.goods_small_logo"
          @click="toGoodsDetail(item.goods_id)"
        >
          <template #desc>
            <div>{{item.goods_name}}</div>
          </template>
          <template #price>
            <div style="color:red">{{'￥'+ item.goods_price}}</div>
          </template>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      finished: false,
      loading: false,
      // 商品列表数据
      goodsList: [],
      temGoodsList: [],
      pagenum: 1,
      pagesize: 10,
      total: 0,
      count: 1
    };
  },
  methods: {
    async getGoodsList() {
      let queryData = location.hash.split("?")[1];
      let queryName = queryData.split("=")[0];
      let queryContent = queryData.split("=")[1];
      // let queryData = "query=电脑";
      //   console.log(queryData);
      const { data } = await this.$http.get(`/goods/search?${queryData}`, {
        params: {
          pagenum: this.pagenum - 1,
          pagesize: this.pagesize
        }
      });
      // console.log(data);
      if (data.meta.status != 200)
        return this.$toast.fail("获取商品列表失败！");
      let goods = data.message.goods;
      if (goods == null || goods.length === 0) {
        // 加载结束
        this.finished = true;
        return;
      }
      if (goods.length < this.pagesize) {
        // 最后一页不足10条的情况
        this.finished = true;
      }
      // 处理数据
      if (data.message.pagenum === 1) {
        this.goodsList = goods;
        // console.log(this.goodsList);
      } else {
        this.goodsList = this.goodsList.concat(goods);
        // console.log(this.goodsList);
      }
      this.isLoading = false;
      this.loading = false;
    },
    // 下拉刷新时触发
    onRefresh() {
      this.pagenum = 1;
      this.goodsList = [];
      this.loading = true;
      this.finished = false; // 不写这句会导致你上拉到底过后在下拉刷新将不能触发下拉加载事件
      this.getGoodsList();
    },
    onload() {
      // console.log(123);
      this.pagenum++;
      this.getGoodsList();
    },
    toGoodsDetail(goodsId) {
      this.$router.push(`/pages/goods_detail/${goodsId}`);
    }
  }
};
</script>

<style lang="less" scoped>
</style>